<template>
  <div>
      <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>注册用户列表</span>
  </div>
  <el-table
    :data="list"
    border
    style="width: 100%">
    <el-table-column
      type="index"
    fixed
    label="序号"
    align="center"
      width="50">
    </el-table-column>
    <el-table-column
      prop="username"
      align="center"
      label="用户名"
      width="200">
    </el-table-column>
    <el-table-column
      prop="icon"
      align="center"
      label="头像"
      width="200">
      <template slot-scope="scope">
        <img :src="scope.row.icon" alt="" style="border-radius: 50%;width:60px;height:60px;">
      </template>
    </el-table-column>
    <el-table-column
      prop="nickname"
      label="昵称"
      align="center"
      width="150">
    </el-table-column>
    <el-table-column
      prop="realname"
      label="真实姓名"
      align="center"
      width="200">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别"
      align="center"
      width="200">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      align="center"
      width="200">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      align="center"
      width="200">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      align="center"
      width="200">
    </el-table-column>
    <el-table-column
    prop="createTime"
      fixed="right"
      align="center"
      label="注册时间"
      width="80">
      
    </el-table-column>
  </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="doot.start"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="doot.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</el-card>
  </div>
</template>

<script >
import { findUsersByPage } from "@/api/myd/index";
export default {
  data() {
    return {
      doot: {
        start: 1,
        limit: 10,
      },
      list: [],
      total:0,
    };
  },
  created() {
    this.findUsersByPageAPI();
  },
  components: {},

  computed: {},

  mounted() {},

  methods: {
    //   分页切换
    handleSizeChange(val){
         this.doot.limit=val
         this.findUsersByPageAPI()
    console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val){
        this.doot.start=val
        this.findUsersByPageAPI()
    },
    findUsersByPageAPI() {
      var _this = this;
      findUsersByPage(this.doot.start, this.doot.limit).then((res) => {
        console.log(res)
        if(res.success){
            _this.list=res.data.rows
            _this.total=res.data.total
        }else{
            _this.$message.error("获取列表失败")
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card{
    margin: 30px;
    
}
</style>